<template>
	<view>
		<!-- 会员权限 -->
		<view>
			<view class="coupon">会员权限</view>
			<view class="tab_list">
				<view v-for="(item,index) in tab_list" :key='index' :class="{items:true,items_active:tab_index==index}" @click="tabs1(index)">{{item}}</view>
			</view>
			<!-- 美发 -->
			<view class="tab_index" v-show="tab_index == 0">
				<view class="tab_cen">
					<view class="che"></view>
					<view class="zhekou">
						<view class="zhe_name">基础服务折扣</view>
						<view class="zhe_name1">洗吹、造型、洗剪吹</view>
					</view>
					<view class="sks">7折</view>
				</view>

			</view>
			<!-- 美容 -->
			<view class="tab_index" v-show="tab_index == 1">
				美容
			</view>
			<!-- 。。。 -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {

				tab_list: ['美发', '美容', '化妆', '美甲', '美体'],
				tab_index: 0,
				

			}
		},
		methods: {
			tabs1(index) {
				this.tab_index = index
			},
			
		},
	}
</script>

<style lang="scss">
	.coupon {
		line-height: 78rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #282828;
		border-bottom: 1rpx solid #E0E0E0;
	}

	.tab_list {
		padding: 30rpx 30rpx 0 30rpx;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.items_active {
			border-bottom: 4rpx solid #00C6C2;
			font-weight: bold !important;
			color: #00C6C2 !important;
		}

		.items {
			height: 60rpx;

			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8A8A8A;
		}
	}

	.tab_index {
		padding: 0 30rpx;

		.tab_cen {
			padding: 25rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.che{

				text-align: center;
				height: 20rpx;
				width: 20rpx;
				background-color: #fff;
				border-radius: 50%;
				border: 5rpx solid #00c6c2;
			}

			.zhekou {
				width: 70%;

				.zhe_name {
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;
				}

				.zhe_name1 {
					margin-top: 5rpx;
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #8A8A8A;
				}
			}

			.sks {
				width: 20%;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
			}
		}
	}
</style>
